<template>
	<div class="room">
		<div class="room_top">
			<div class="room_top_search">
				<u-search placeholder="请输入主播姓名/房间编号" @custom='searchEvnet' v-model="keyword" @click='searchEvnet'
					@search='searchEvnet'>
				</u-search>
			</div>
			<div class="room_top_select">
				<div class="room_top_select_items" v-for="(item,index) in list" :key="index" @click='closeEvent(index)'>
					<span>{{item.name}}</span>
					<u-icon name="arrow-up-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-if="item.status == 2"></u-icon>
					<u-icon name="arrow-down-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-else></u-icon>

				</div>
			</div>
		</div>

		<!-- 滚动层 -->
		<div class="roomScroll">
			<anchorlist :list='floorList' style="height: 100%;"></anchorlist>
		</div>
		<!-- 下拉 -->
		<u-picker :show="show" :closeOnClickOverlay='true' @close='cancel' :columns="columns" @confirm='confirm' @cancel='cancel' keyName="label"></u-picker>
		<u-picker :show="showT" :closeOnClickOverlay='true' @close='cancel' :columns="columnsT" @confirm='confirmT' @cancel='cancel' keyName="label"></u-picker>
		<frools v-if="showF" :closeOnClickOverlay='true' @close='cancel' :froolShow='showF' :isCen='2' @confirm='FroolConfirm' @cancel='showF=false'></frools>
		<!-- <u-picker :show="showF" :columns="columnsF" ref="uPicker" @confirm='confirmF' @cancel='cancel' keyName="name"
			@change="changeHandler"></u-picker> -->
		<div id="tabar">
			<tabar :value4='1'></tabar>
		</div>
	</div>
</template>

<script>
	import anchorlist from '@/pagesA/components/anchorlist.vue'
	import tabar from '@/pagesA/components/tabar.vue'
	import frools from '@/pages/server/components/frools.vue'
	export default {
		components: {
			anchorlist,
			tabar,
			frools
		},
		data() {
			return {
				keyword: '遥看瀑布挂前川',
				show: false,
				// '主播状态', '主播类型', '楼层筛选'
				list: [{
					name: '主播状态',
					status: 1,
				}, {
					name: '主播类型',
					status: 1,
				}, {
					name: '楼层筛选',
					status: 1,
				}],
				keyword: '',
				leftListIndex: 0,
				floorList: [],
				columns: [
					[{
							label: '全部',
							id: 'all'
						},
						{
							label: '待入驻',
							// 其他属性值
							id: '-1'
							// ...
						}, {
							label: '审核中',
							id: 1
						}, {
							label: '已入驻',
							id: 2
						}, {
							label: '待搬家',
							id: 3
						}, {
							label: '已搬离',
							id: 4
						},
						{
							label: '回线上',
							id: 5
						}
					]
				],
				columnsT: [
					[{
						label: '全部',
						id: 'all'
					}, {
						label: '正式主播',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '帮扶计划',
						id: 2
					}, {
						label: '团播主播',
						id: 3
					}, {
						label: '线上主播',
						id: 4
					}, ]
				],
				columnsF: [],
				floor_id: "1", //楼层id
				storey_id: '',
				page: 1,
				type: '',
				status: "", //-1待入驻 1审核中 2已入驻 3待搬家 4已搬离
				showF: false,
				showT: false,
			}
		},
		onShow() {
			this.page = 1
			this.floorList = []
			this.getfool()
		},
		onReachBottom() {
			this.page++
			this.getIndexMessage()
		},
		methods: {
			changeHandler(e) {
				console.log('e', e.index)
				// this.floor_id = e.value[0].floor_id
			},
			searchEvnet() {
				console.log('111')
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},
			async getfool() {
				const picker = this.$refs.uPicker
				const {
					data
				} = await this.$request(this.$Api.anchorFloor, {

				}, "POST")
				if (data.code !== 0) return
				// this.columnsF = data.data.list
				// this.floor_id = data.data.list[0].floor_id
				// if (data.data.list[0].storey) {
				// 	this.storey_id = data.data.list[0].storey[0].storey_id
				// }
				this.getIndexMessage()
			},
			async getIndexMessage() {
				const {
					data
				} = await this.$request(this.$Api.anchorList, {
					storey_id: this.storey_id,
					floor_id: this.floor_id,
					type: this.type == '全部' ? '' : this.type,
					status: this.status == 'all' ? '' : this.status,
					page: this.page,
					keyword: this.keyword
				}, "POST")
				if (data.code !== 0) return
				this.floorList = this.floorList.concat(data.data.list)
				console.log('111', this.message)
			},
			closeEvent(e) {
				if (e == 0) {
					this.show = true
				} else if (e == 1) {
					this.showT = true
				} else {
					this.showF = true
				}
			},
			cancel() {
				console.log(111)
				this.showT = this.showF = this.show = false
			},
			// '主播状态', '主播类型', '楼层筛选'
			confirm(e) {
				console.log('111', e)
				this.status = e.value[0].id
				if (e.value[0].label == '全部') {
					this.list[0].name = '主播状态'
					this.list[0].status = 1
				} else {
					this.list[0].name = e.value[0].label
					this.list[0].status = 2
				}
				this.showT = this.showF = this.show = false
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},

			async FroolConfirm(e) {
				this.floor_id = e.floor_id
				this.storey_id = e.storey_id
				this.page = 1
				this.floorList = []
				this.showF = this.show = false
				this.getIndexMessage()
			},
			confirmT(e) {
				this.type = e.value[0].label
				console.log('3333', e)
				this.showT = this.showF = this.show = false
				// this.list[1] = e.value[0].label
				if (e.value[0].label == '全部') {
					this.list[1].name = '主播类型'
					this.list[1].status = 1
				} else {
					this.list[1].name = e.value[0].label
					this.list[1].status = 2
				}
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},
		}
	}
</script>

<style lang="scss">
	.room {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		// padding-bottom: 180rpx;
	}

	.roomScroll {
		height: calc(100% - 322rpx);
		overflow: scroll;
		margin-top: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		padding: 28rpx 0;
		padding-bottom: 150rpx;
		box-sizing: border-box;

		.roomScrollLeft {
			width: 160rpx;
			overflow: scroll;
			height: 100%;
			background: #FFFFFF;

			.roomScrollLeft_item {
				width: 160rpx;
				min-height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				color: #000;
				background: #FFFFFF;
				font-size: 28rpx;

			}

			.roomScrollLeft_item_act {
				background: #2E61FF;
				color: #FFFFFF;
			}
		}

		.roomScrollRight {
			width: calc(100% - 160rpx);
			display: flex;
			flex-wrap: wrap;
			overflow: scroll;
			height: 100%;

			.roomScrollRight_items {
				width: 252rpx;
				height: 230rpx;
				background: #FFFFFF;
				margin: 0 0rpx 24rpx 24rpx;

				.roomScrollRight_items_top {
					font-size: 32rpx;
					line-height: 90rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					.roomScrollRight_items_top_left {
						font-weight: bold;
					}

					.roomScrollRight_items_top_right {
						font-size: 24rpx;
					}
				}

				.roomScrollRight_items_center {
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.roomScrollRight_items_center_right {
						width: 88rpx;
						height: 34rpx;
						border-radius: 8rpx;
						border: 2rpx solid #CECECE;
						font-size: 22rpx;
						color: #CECECE;
						text-align: center;
						line-height: 34rpx;
						margin-left: 8rpx;
					}

				}

				.roomScrollRight_items_bottom {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					margin-top: 24rpx;
					padding: 0 30rpx;
					box-sizing: border-box;

					.roomScrollRight_items_bottom_left {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}

	.room_top {
		width: 750rpx;
		height: 216rpx;
		background: #FFFFFF;

		.room_top_search {
			padding: 30rpx;
			z-index: 999;
			box-sizing: border-box;
		}

		.room_top_select {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			margin-top: 10rpx;
		}

		.room_top_select_items {
			font-size: 28rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 33.33%;

			span {
				margin-right: 10rpx;
			}
		}
	}
</style>